<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>树网格之报表 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2 title="Reports using TreeGrid">树网格之报表</h2>
	<p title="Using TreeGrid to show complex reports.">　　运用树网格来展现复杂报表。</p>
	<div style="margin:10px 0;"></div>
	<table title="<ch title='Reports using TreeGrid'>&nbsp;树网格报表</ch>" class="easyui-treegrid" style="width:740px;height:332px"
			data-options="
				url: 'treegrid_data3.json', method: 'get',
				rownumbers: true,
				showFooter: true,
				idField: 'id',
				treeField: 'region'
			">
		<thead frozen="true">
			<tr>
				<th field="region" width="160"><rh title='Year & Quarter'>期间→　</rh><ch title='Region'>↓地区</ch></th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th colspan="4">2009年</th>
				<th colspan="4">2010</th>
			</tr>
			<tr>
				<th field="f1" align="right"><ch title='1st qrt.'>第一季度</ch></th>
				<th field="f2" align="right"><ch title='2nd qrt.'>第二季度</ch></th>
				<th field="f3" align="right"><ch title='3rd qrt.'>第三季度</ch></th>
				<th field="f4" align="right"><ch title='4th qrt.'>第四季度</ch></th>
				<th field="f5" align="right"><ch title='1st qrt.'>一季</ch></th>
				<th field="f6" align="right"><ch title='2nd qrt.'>二季</ch></th>
				<th field="f7" align="right"><ch title='3rd qrt.'>三季</ch></th>
				<th field="f8" align="right"><ch title='4th qrt.'>四季</ch></th>
			</tr>
		</thead>
	</table>

</body>
</html>